<template>
  <div
    class="flex h-72 flex-col items-center justify-center gap-12 bg-background px-4 py-24 md:flex-row"
  >
    <LogoOrigami>
      <LogoOrigamiItem class="bg-orange-300 text-neutral-900">
        <Icon
          name="mdi:github"
          size="96"
        />
      </LogoOrigamiItem>
      <LogoOrigamiItem class="bg-green-300 text-neutral-900">
        <Icon
          name="logos:notion-icon"
          size="96"
        />
      </LogoOrigamiItem>
      <LogoOrigamiItem class="bg-cyan-300 text-neutral-900">
        <Icon
          name="logos:whatsapp-icon"
          size="96"
        />
      </LogoOrigamiItem>
      <LogoOrigamiItem class="bg-purple-300 text-black">
        <Icon
          name="logos:messenger"
          size="96"
        />
      </LogoOrigamiItem>
      <LogoOrigamiItem class="bg-white text-neutral-900">
        <Icon
          name="logos:google-drive"
          size="96"
        />
      </LogoOrigamiItem>
    </LogoOrigami>
  </div>
</template>
